<%= stylesheet_link_tag "singers/_index" %>

<script type="text/javascript" charset="utf-8">
    bind_method(document, "keydown", goRoot);

    $(function () {
        var main = root.getWidgetById("main");
        main.focus()

        main.on("keydown", function (e) {
            e =e || window.event;
            var keyValue = e.which || e.keyCode;
            var data = e.target.con.dataset
            switch (keyValue) {
                case 13:
                    Cookies.set('prev', "<%= singers_path %>")
                    Cookies.set("<%= singers_path %>", "?row_index=" + data.row_index + "&item_index=" + data.item_index)
                    window.location.href = data.href
                    break;
            }
        });
    });
</script>

<div id="main" fe-role="Switch">
  <div class="singer-scroll-v" fe-role="Scroll" fe-cfg="scroll_dir:v">
    <div class="scroll-list">

      <% @singer_tags.each_with_index do |row, row_index| %>
        <div class="singer-scroll-h" 
             fe-role="Scroll"
             fe-cfg="scroll_dir:h,scroll_duration:0.3,scroll_easing:ease-out,<%= "default_focus:yes" if row_index === params[:row_index].to_i %>">
          <ul class="scroll-list clearfix" style="width: <%= row.size * 290 + 100 %>px;">

            <% row.each_with_index do |item, item_index| %>
              <li data-href="<%= singers_choose_path(singer_tag_id: item.serial_id, page: 1) %>" 
                data-row_index="<%= row_index %>"
                data-item_index="<%= item_index %>"
                  fe-role="Widget"
                  fe-cfg="<%= "default_focus:yes," if item_index === params[:item_index].to_i %>"
                  class="singer-tab"
                  >

                <div class="singer-tab-photo">
                  <div class="photo-mask"></div>
                  <%= image_tag("/images/singer_tags/sc#{item[:serial_id]}.jpeg", class: "singer-tab-photo-img") %>
                </div>

                <div class="singer-tab-inner">
                  <div class="text-mask"></div>
                  <div class="marquee-truncate overflow-hidden"><%= item[:name] %></div>
                </div>

              </li>
            <% end %>

          </ul>
        </div>
      <% end %>

    </div>
  </div>
</div>
